<!DOCTYPE html "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">


<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <input type="hidden" id="productId" name="productId" th:value="${product.productId}">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">产品名称：</label>
                            <div class="col-sm-10">
                                <input id="productName" name="productName" th:value="${product.productName}"
                                       class="form-control" type="text" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">产品描述：</label>
                            <div class="col-sm-10">
                                <input id="productTitle" name="productTitle" th:value="${product.productTitle}" tabindex="2" class="form-control" type="text" maxlength="30">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">产品类型：</label>
                            <div class="col-sm-4">
                                <select id="productType" name="productType"  th:field="${product.productType}"
                                        data-placeholder="产品类型" class="form-control chosen-select"
                                        onchange="changeProdType(this)">
                                    <option value="1">信用卡办理</option>
                                    <option value="2">芝麻分贷款</option>
                                </select>
                            </div>
                            <label id="lb_rate" class="col-sm-2 control-label" style="display: none">月利率(%)：</label>
                            <div id="div_rate"  class="col-sm-4" style="display: none">
                                <input type="number" id="monthRate" name="monthRate" th:value="${product.monthRate}"
                                       data-placeholder="月利率" class="form-control" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">是否置顶：</label>
                            <div class="col-sm-4">
                                <select id="isHot" name="isHot" th:field="${product.isHot}"
                                        data-placeholder="是否置顶" class="form-control chosen-select">
                                    <option value="0">否</option>
                                    <option value="1">是</option>
                                </select>
                            </div>
                            <label class="col-sm-2 control-label">预设申请成功人数：</label>
                            <div class="col-sm-4">
                                <input type="number" id="succNum" name="succNum" th:value="${product.succNum}"
                                       data-placeholder="预设申请成功人数" class="form-control" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">产品图片：</label>
                            <div class="col-sm-6">
                                <input @change="fileUpload($event)" accept="image/*" type="file">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <img :src="imgDataURL" alt="产品图片" class="img-responsive img-thumbnail"
                                     style="height: 60px;width: 60px">
                                <input type="hidden" name="productImg" id="productImg" th:value="${product.productImg}">
                            </div>
                        </div>

                        <div class="form-group" id="cardDiv1" >
                            <label class="col-sm-2 control-label">信用卡图片：</label>
                            <div class="col-sm-6">
                                <input @change="fileUploadCard($event)" accept="image/*" type="file">
                            </div>
                        </div>

                        <div class="form-group" id="cardDiv2">
                            <div class="col-sm-8 col-sm-offset-3">
                                <img :src="cardimgDataURL" alt="信用卡图片" class="img-responsive img-thumbnail"
                                     style="height: 80px;width: 120px">
                                <input type="hidden" name="cardImg" id="cardImg" th:value="${product.cardImg}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邀请佣金：</label>
                            <div class="col-sm-4">
                                <input type="number" id="commission" name="commission" th:value="${product.commission}"
                                       data-placeholder="邀请佣金" class="form-control" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">产品申请页地址：</label>
                            <div class="col-sm-10">
                                <input id="regPageUrl" name="regPageUrl" th:value="${product.regPageUrl}" class="form-control"
                                       type="text" maxlength="200" placeholder="http://..."  >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">申请条件：</label>
                            <div class="col-sm-10">
                                <textarea id="regCondition" name="regCondition" th:text="${product.regCondition}"
                                          class="form-control" placeholder="申请条件..." ></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">产品详情说明：</label>
                            <div class="col-sm-10">
                                <textarea id="productDetail" name="productDetail" th:text="${product.productDetail}"
                                          class="form-control" placeholder="产品详情说明..." ></textarea>
                            </div>
                        </div>

                        <!--<div class="form-group">-->
                        <!--<input id="productDetail" name="productDetail" th:value="${product.productDetail}"  type="hidden" class="form-control">-->
                        <!--<label class="col-sm-2 control-label">产品详情说明：</label>-->
                        <!--<div class="col-sm-10">-->
                        <!--<div class="ibox-content no-padding">-->
                        <!--<div id="content_sn" class="summernote"></div>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</div>-->
                        <div class="text-right form-group">
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script th:inline="javascript">
    $().ready(function () {
        validateRule();

        var productType = [[${product.productType}]];
        if(productType == "1"){
            $('#lb_rate').hide();
            $('#div_rate').hide();
            $('#cardDiv1').show();
            $('#cardDiv2').show();
        }else if(productType == "2"){
            $('#lb_rate').show();
            $('#div_rate').show();
            $('#cardDiv1').hide();
            $('#cardDiv2').hide();
        }

    });

    // 上传图片
    const vue = new Vue({
        el: '#signupForm',
        data: {
            reqData: {},
            imgDataURL: [[${product.productImg}]],
            cardimgDataURL: [[${product.cardImg}]]
        },
        methods: {
            fileUpload: function (evt) {
                const files = evt.target.files;
                if (files.length == 0) {
                    return;
                }

                const file = files[0];
                if (!/image\/\w+/.test(file.type)) {
                    parent.layer.alert("请选择图像类型的文件！");
                    return;
                }

                let vm = this;

                const fileType = '.' + file.name.toLowerCase().split('.').pop();

                const reader = new FileReader();
                reader.onload = (function (file) {
                    return function (e) {
                        const result = e.target.result;
                        vm.imgDataURL = result;
                        const base64Str = result.split(",")[1];
                        //上传地址动态获取
                        var uploadUrl = "/api/fileUpload";
                        $.post(uploadUrl, {fileType, base64Str}, function (resp) {
                            if (!!resp) {
                                const base64 = new Base64();
                                const respData = JSON.parse(base64.decode(resp));
                                if (respData.code === 0) {
                                    $("#productImg").val(respData.data.imgPath);
                                }
                            }
                        });
                    }
                })(file);
                reader.readAsDataURL(file);
            },
            fileUploadCard: function (evt) {
                const files = evt.target.files;
                if (files.length == 0) {
                    return;
                }

                const file = files[0];
                if (!/image\/\w+/.test(file.type)) {
                    parent.layer.alert("请选择图像类型的文件！");
                    return;
                }

                let vm = this;

                const fileType = '.' + file.name.toLowerCase().split('.').pop();

                const reader = new FileReader();
                reader.onload = (function (file) {
                    return function (e) {
                        const result = e.target.result;
                        vm.cardimgDataURL = result;
                        const base64Str = result.split(",")[1];
                        //上传地址动态获取
                        var uploadUrl = "/api/fileUpload";
                        $.post(uploadUrl, {fileType, base64Str}, function (resp) {
                            if (!!resp) {
                                const base64 = new Base64();
                                const respData = JSON.parse(base64.decode(resp));
                                if (respData.code === 0) {
                                    $("#cardImg").val(respData.data.imgPath);
                                }
                            }
                        });
                    }
                })(file);
                reader.readAsDataURL(file);
            }
        }

    });

    $.validator.setDefaults({
        submitHandler: function () {
            save();
        }
    });

    function changeProdType(obj){
        if(obj.value == "1"){
            $('#lb_rate').hide();
            $('#div_rate').hide();
            $('#cardDiv1').show();
            $('#cardDiv2').show();
        }else if(obj.value == "2"){
            $('#lb_rate').show();
            $('#div_rate').show();
            $('#cardDiv1').hide();
            $('#cardDiv2').hide();
        }
    }
    function getInfo() {
        $.ajax({
            type: "GET",
            url: "/mp/company/getInfo",
            dataType: "JSON",
            async: false,
            success: function (data) {
                console.log("data",data);
                if(data != null){
                    $('#companyName').val(data.companyName);
                    $('#companyTel').val(data.companyTel);
                    $('#companyDetail').val(data.companyDetail);

                    $('#content_sn').summernote('code', data.companyDetail);
                }
            }
        });

    }

    function save() {
        //var content_sn = $("#content_sn").summernote('code');
        //$("#productDetail").val(content_sn);
        $.ajax({
            cache: true,
            type: "POST",
            url: "/mp/product/update",
            data: $('#signupForm').serialize(), // 你的formid
            async: false,
            success: function (data) {
                layer.msg("操作成功");
                parent.reLoad();
                var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                parent.layer.close(index);
            }
        });
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                companyName: {
                    required: true
                },
                companyTel:{
                    required: true
                },
                companyDetail:{
                    required: true
                }
            },
            messages: {
                companyName: {
                    required: icon + "必填"
                },
                companyTel: {
                    required: icon + "必填"
                },
                companyDetail: {
                    required: icon + "必填"
                }
            }
        })
    }

</script>
</body>
</html>